import React, { Component } from 'react'

import {
  HashRouter as Router,
  NavLink,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

import { withTabbar } from './withTabbar'
import './common.css'

const Home = ()=>{
  return <h1>Home</h1>
}
const User = ()=>{
  return <h1>User</h1>
}
const About = ()=>{
  return <h1>About</h1>
}
const PageLost = ()=> {
  return <h1>404</h1>
}

let TabbarHome = withTabbar(Home)
let TabbarUser = withTabbar(User)
let TabbarAbout = withTabbar(About)

export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <NavLink activeClassName='active' exact to='/'>首页</NavLink>
            <NavLink activeClassName='active' exact to='/user'>我的</NavLink>
            <NavLink activeClassName='active' exact to='/about'>关于</NavLink>
            <Route exact path='/' component={TabbarHome}></Route>
            <Route exact path='/user' component={TabbarUser}></Route>
            <Route exact path='/about' component={TabbarAbout}></Route>
            <Route exact path='/404' component={PageLost}></Route>
            <Redirect to='/404'></Redirect>
          </Switch>
        </Router>
      </div>
    )
  }
}
